<template>
  <div id="NewsInformation">
    <img src="../assets/img/head3.png"
         alt="">
    <div class="content">
      <div class="news">
        <div class="newtitle">
          <span class="newtitle_span">最新资讯</span>
        </div>
        <div id="tabcontainer"
             v-for="(item,index) in newsList"
             :key="index">
          <div class="news_li"
               @click="gonewsdetail(item)">
            <div class="left">
              <a href="#">{{item.title}}</a>
            </div>
            <div class="right">
              <a href="#">{{item.publish_time}}</a>
            </div>
          </div>
        </div>
      </div>
      <div class="block">
        <!-- :current-page.sync="currentPage3" -->
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-size="10"
                       layout="prev, pager, next, jumper"
                       :total="newsList.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'NewsInformation',
  data () {
    return {
      newsList: [],
    }
  },
  mounted () {

  },
  created () {
    this.getnewList()
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    gonewsdetail (item) {
      // this.$router.push('/newsdetail')
      this.$router.push({
        name: 'newsdetail',
        params: { row: item }
      })
    },
    getnewList () {
      const api = `getnewslist`
      this.$axios.get(api)
        .then(res => {
          console.log('新闻列表', res.data)
          for (let i = 0; i < res.data.data.length; i++) {
            this.newsList.push(res.data.data[i])
          }
          console.log('新闻列表：', this.newsList)
        })
        .catch(err => {
          console.log(err)
        })
    },
  }
}
</script>
<style scoped>
.content {
  width: 1200px;
  margin: 20px auto;
  background-color: #fff;
  position: relative;
  z-index: 1;
  border: 1px solid rgb(192, 191, 191);
  box-shadow: 0px 1px 2px rgb(90, 89, 89);
  height: 700px;
}
.news {
  position: relative;
}
.newtitle {
  line-height: 40px;
  font-size: 18px;
  border-bottom: 2px solid #0099cc;
}
.newtitle_span {
  background: url("../assets/img/title.png") no-repeat;
  background-position: 0 -40px;
  line-height: 40px;
  height: 40px;
  display: inline-block;
  padding: 0px 20px;
  color: #fff;
}
.news_li {
  height: 70px;
  padding: 15px;
  padding-left: 45px;
  padding-right: 45px;
  overflow: hidden;
  border-bottom: dashed 1px #ddd;
  line-height: 20px;
  color: #999;
  font-size: 14px;
  background: #fff;
}
.news_li :hover {
  color: rgb(39, 96, 219);
}
.left {
  height: 35px;
  text-align: center;
  float: left;
}
.right {
  height: 35px;
  text-align: center;
  float: right;
}
a {
  line-height: 35px;
  font-size: 16px;
  color: rgb(98, 98, 98);
  text-decoration: none;
}
.block {
  text-align: center;

  position: absolute;
  left: 450px;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  .news-container > li {
    width: 100%;
  }
  .news-container > li > .content {
    width: 70%;
    text-align: left;
    float: right;
  }
  .news-container > li > .time {
    width: 30%;
    text-align: left;
    float: right;
  }
  .news-container > li > .circle {
    display: none;
  }
}
</style>

